<template>
	<div>
		<MiniHeader title="购物车" @isEdit="toggleEdit"></MiniHeader>
		<div id="cart_container">
			<div id="cart_item_wrapper" v-if="cartList.length && contentLoaded">
				<CartItem v-for="goods in cartList"
					:goods="goods"
					:key="goods.goods_id"
					@numMinus=numMinus(goods)
					@numAdd=numAdd(goods)>
					</CartItem>
			</div>
		</div>
		<div v-if="!cartList.length && contentLoaded">
			<div class="middle-tip">
				<p>暂无任何商品</p>
				<div class="c-btn highlight" style="marginTop: .7rem">去看看</div>
			</div>
		</div>
		<CartFooter></CartFooter>
	</div>
</template>
<script>
import MiniHeader from '@/components/MiniHeader'
import CartItem from './CartItem'
import CartFooter from './CartFooter'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
export default{
	name:'Cart',
	async created(){
		Indicator.open()
		await this.getCartGoods()
		Indicator.close()
		this.contentLoaded = true
	},
	data(){
		return {
			contentLoaded: false,
			isEdit: false,
			isSelected: false
		}
	},
	computed:{
		...mapGetters({
			cartList: 'cart/cartGoods',
			selectedGoods:'scart/electedGoods',
			selectedGoodsId: 'cart/selectedGoodsId'
		}),
	},
	methods:{
		...mapActions({
			getCartGoods: 'cart/getCartGoods',
			editCartNum: 'cart/editCartNum'
		}),
		toggleEdit(isEdit){
			this.$store.commit('toggleStatus', {status: isEdit ? 'edit' :'normal'})
		},
	},
	components: {MiniHeader, CartItem, CartFooter}
}
</script>
<style lang='less' scoped>
#cart_container{
	margin-top: 1.17rem;
	padding-bottom: 2rem;
}
#cart_item_wrapper{
	padding-bottom: .3rem;
	background: #fff;
}
</style>